<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- meta使用viewport以确保页面可自由缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>标签页面</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" href="css/tag-add.css">
		<style type="text/css">

		</style>
		<!-- 图标 -->
		<script src="//at.alicdn.com/t/font_748398_ozk4d5k332j.js"></script>
		<!--LOGO-->
		<script src="//at.alicdn.com/t/font_756404_3wfwbvrruoy.js"></script>
	</head>

	<body>
		<div class="header weui-flex">
			<div id="btn-back" class="title-icon-box" onClick="javaScript:history.go(-1)">
				<svg class="icon title-icon" aria-hidden="true">
					<use xlink:href="#icon-fanhui"></use>
				</svg>
			</div>
			<div class="my-flex"></div>
			<div id="title" class="title-box">
				添加收入类别
			</div>
			<div class="my-flex"></div>
			<div class="title-icon-box" onclick="submit()">
				<svg class="icon title-icon" aria-hidden="true">
					<use xlink:href="#icon-gou"></use>
				</svg>
			</div>
		</div>
		
		<div class="main-title">
			<div id="i-color-box"  class="tag-icon-box">
				<svg class="icon title-icon" aria-hidden="true">
					<use id="i-icon-box" xlink:href="#icon-gift_icon"></use>
				</svg>
			</div>
			<!-- 占位 -->
			<div class="my-flex title-text-box">
				<input id="tag-text" type="text" align="right"  placeholder="请输入标签名称"/>
			</div>
		</div>
		<div class="main">
		<div class="color-box">
			<div class="icon-title-box"><span></span>颜色</div>
			<!-- 占位置 -->
			<div id="color-first" style="height: 40px;"></div>
	
			
		</div>
		<div class="icon-box">
			<div class="icon-title-box"><span></span>图标</div>
			<!-- 占位置 -->
			<div id="icon-first" style="height: 30px;"></div>
		</div>
		</div>


		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.js"></script>
		<script src="js/jquery.swipe.js"></script>
		<script src="js/city-picker.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/layer.js"></script>
		<script src="js/api.js"></script>
		<script>
			var userId;
			var type;
			var id;
			
			$(function() {
				userId = API.getStorage("user");
				if(!userId){
					//检验是否登录
					window.location.href = 'login.html?error=1';
					return;
				}

				type = getUrlParam('type');
				id = getUrlParam('id');
				if(!!id){
					if(!!type && type == 1){
						$('#title').html('编辑支出类别');
					}else{
						$('#title').html('编辑收入类别');
					}
					//初始化数据
					API.getTagById(id,function(data){
						if(data.code == 0 && data.data.length == 1){
							var obj = data.data[0];
							$('#i-icon-box').attr('xlink:href',obj.icon);
							$('#i-color-box').css('background-color',obj.color);
							$('#tag-text').val(obj.title);
						}else{
							alert(data.msg)
						}
					});
				}else{
					if(!!type && type == 1){
						$('#title').html('添加支出类别');
					}else{
						$('#title').html('添加收入类别');
					}
				}
				API.showLoading('加载中...');
				//获取下列数据
				API.getIcon(function(data){
					if(data.code == 0){
						var list = data.data;
						for(var i = 0; i<list.length;i++){
							$('#icon-first').after(getIconDom(list[i]));
						}
						$('.tag-item').click(function(){
							var icon = $(this).attr('d-icon');
							$('#i-icon-box').attr('xlink:href',icon);
							$('#i-color-box').addClass('action');
							setTimeout(function(){
								$('#i-color-box').removeClass('action');
							},200)
						});
						if(!id) $('.tag-item').eq(0).click();
						API.getColor(function(d){
							API.hideLoading();
							if(d.code == 0){
								var l = d.data;
								for(var i = 0; i<l.length;i++){
									$('#color-first').after(getColorDom(l[i]));
								}
								$('.color-item').click(function(){
									var color = $(this).attr('d-color');
									$('#i-color-box').css('background-color',color);
								});
								if(!id) $('.color-item').eq(0).click();
							}else{
								alert(d.msg);
							}
						});
					}else{
						API.hideLoading();
						alert(data.msg);
					}
				});
			});
			
			function submit(){
				if(!!id){
					var title = $('#tag-text').val();
					if(!title){
						alert('请输入标签名字');
						return;
					}
					API.showLoading('提交中...');
					var tag = {};
					tag.icon = $('#i-icon-box').attr('xlink:href');
					tag.title = title;
					tag.color = $('#i-color-box').css('background-color').colorHex();
					API.updateTagById(tag,id,function(data){
						API.hideLoading();
						if(data.code == 0 && data.data >0){
							//添加成功
							window.location.href = 'tag_list.html?success=2&type'+type;
						}else{
							//添加失败
							alert(data.msg);
						}
					})
				}else{
					var title = $('#tag-text').val();
					if(!title){
						alert('请输入标签名字');
						return;
					}
					API.showLoading('提交中...');
					var tag = {};
					tag.icon = $('#i-icon-box').attr('xlink:href');
					tag.title = title;
					tag.type = type;
					tag.user = userId;
					tag.color = $('#i-color-box').css('background-color').colorHex();
					API.addTag(tag,function(data){
						API.hideLoading();
						if(data.code == 0 && data.data >0){
							//添加成功
							window.location.href = 'tag_list.html?success=1&type'+type;
						}else{
							//添加失败
							alert(data.msg);
						}
					});
				}
			}
			
			function getIconDom(obj){
				var html = '<div class="tag-item" d-icon="'+ obj.icon +'">\
								<label class="tag-text">\
									<div class="tag-icon-box" >\
										<svg class="icon title-icon" aria-hidden="true">\
											<use xlink:href="'+ obj.icon +'"></use>\
										</svg>\
									</div>\
								</label>\
							</div>';
				return html;
			}
			
			function getColorDom(obj){
				var html = '<div class="color-item" d-color="'+ obj.color +'">\
								<label class="color-new-box">\
									<div class="color" style="background-color: '+ obj.color +';"></div>\
								</label>\
							</div>';
				return html;
			}
			
		</script>
	</body>

</html>